<html>
<head>

<link rel="stylesheet" href="drag.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jqDnR.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
	$('ex2').jqDrag();

			});
</script>
</head>
<body>




	<div id="header"
		style="position: absolute; top: 3; left: 4; width: 1330; height: 80; z-index: 1; padding: 5px; border: #000000 2px solid; background-color: ghostwhite;">
		<h1 align="center">My test page</h1>
	</div>
	<
	<div id="content121"
		style="position: absolute; top: 100; left: 288; width: 1045; height: 787; z-index: 1; padding: 5px; background-color: white;">
		<a href="" id="close1"
			style="position: absolute; top: 0; left: 0; width: 20; height: 10; z-index: 1; padding: 5px; border: #000000 2px; background-color: azure;"></a><br>



		<div id=layer2
			style="position: absolute; top: 0; left: 25; width: 300; height: 200; z-index: 1; padding: 5px; border: grey 2px solid; background-color: white;">

			<div id=layer3 align="center"
				style="position: absolute; top: 0; left: 0; width: 298; height: 25; z-index: 1; padding: 5px; border: grey 2px solid; background-color: lightgrey;">
				<a href="" style="position: absolute; top: -5; left: 390;"><img
					src="images/no.png"> </a> <font size="5"> Heading</font>

			</div>
		</div>
		<div id=layer4
			style="position: absolute; top: 0; left: 370; width: 300; height: 200; z-index: 1; padding: 5px; border: grey 2px solid; background-color: white;">

			<div id=layer5
				style="position: absolute; top: 0; left: 0; width: 298; height: 25; z-index: 1; padding: 5px; border: grey 2px solid; background-color: lightgrey;">

				heading</div>
		</div>
		<div id=layer6
			style="position: absolute; top: 0; left: 720; width: 300; height: 200; z-index: 1; padding: 5px; border: grey 2px solid; background-color: white;">

			<div id=layer7
				style="position: absolute; top: 0; left: 0; width: 298; height: 25; z-index: 1; padding: 5px; border: grey 2px solid; background-color: lightgrey;">

				heading</div>
		</div>
	</div>

	<div id=layer1
		style="position: absolute; align: center; top: 100; left: 0; width: 278; height: 787; z-index: 1; padding: 5px; background-color: lightgrey;">
		<a href="" id="close"
			style="position: absolute; top: 0; left: 258; width: 20; height: 10; z-index: 1; padding: 5px; border: #000000 2px; background-color: azure;">
		</a><br> Layer1 data<br> <a href=""
			style="position: absolute; left: 50;">new widget</a><br> <a
			href="" style="position: absolute; left: 50;">new widget</a><br>
		<a href="" style="position: absolute; left: 50;">new widget</a><br>
		<a href="">new widget</a><br> <a href="">new widget</a><br>
		<a href="">new widget</a><br> <a href="">new widget</a><br>
	</div>
	<div id="ex1" class="jqDnR">
	  I am an example Box "#ex1"<br />
	  You can *RESIZE* Me.
	  <div class="jqHandle jqResize"></div>
	</div>

	<div id="ex2" class="jqDnR">
	  thomas joseph  test draging div elemnts using jquery!!
	  <div class="jqHandle jqResize"></div>
	</div>

	<form></form>
</body>
</html>
</body>
</html>